<template>
	<view class="u-p-y-20 u-text-center" v-if="msg.msgType==TYPES.RECALL">
		<text class="text-gray">{{$t('chat.recall_a_msg',{name:self?$t('chat.you'):msg.nick})}}</text>
	</view>
	<msg-inform v-else-if="msg.msgType==TYPES.INFORM" :info="msg.extras"/>
	<view v-else class="msg_col">
		<view class="msg_avatar" @tap="tapAvatar">
			<u-avatar :src="msg.avatarUrl" size="90" mode="square"></u-avatar>
		</view>
		<view class="msg_body u-border-bottom">
			<view class="msg_top">
				<text class="msg_nick u-font-32" @tap="tapAvatar">{{msg.userName}}</text>
				<text class="msg_time u-font-28 text-gray">{{msg.createTime|dateDiff}}</text>
			</view>
			<view class="msg_content">
				<view class="msg_det" @tap="tapMsg" @longpress="menu">
					<msg-text v-if="msg.msgType==TYPES.TEXT" :content="msg.content"/>
					<msg-pic v-if="msg.msgType==TYPES.IMG" :info="msg.extras" :local="msg.localUrl"></msg-pic>
					<msg-video v-if="msg.msgType==TYPES.VIDEO" :info="msg.extras"></msg-video>
					<msg-audio v-if="msg.msgType==TYPES.AUDIO" :info="msg.extras"></msg-audio>
					<msg-call v-if="msg.msgType==TYPES.CALL" :msg="msg"></msg-call>
					<msg-red v-if="msg.msgType==TYPES.RED" :info="msg.extras"></msg-red>
					<msg-face v-if="msg.msgType==TYPES.FACE" :msg="msg" :info="msg.extras"></msg-face>
					<msg-notice v-if="msg.msgType==TYPES.NOTICE" :info="msg.extras"></msg-notice>
					<msg-file v-if="msg.msgType==TYPES.FILE" :info="msg.extras"></msg-file>
					<msg-card v-if="msg.msgType==TYPES.CARD" :info="msg.extras"></msg-card>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {dateDiff,jumpTo} from "@/utils/util.js"
	import msgText from "./msgText.vue"
	import msgPic from "./msgPicture.vue"
	import msgVideo from "./msgVideo.vue"
	import msgAudio from "./msgAudio.vue"
	import msgCall from "./msgCall.vue"
	import msgRed from "./msgRed.vue"
	import msgFace from "./msgFace.vue"
	import msgNotice from "./msgNotice.vue"
	import msgFile from "./msgFile.vue"
	import msgCard from "./msgCard.vue"
	import msgInform from "./msgInform.vue"
	import {mapGetters} from "vuex"
	import {msgTypes} from "@/IM/index.js"
	export default{
		components:{
			msgText,
			msgPic,
			msgVideo,
			msgAudio,
			msgCall,
			msgRed,
			msgFace,
			msgNotice,
			msgCard,
			msgFile,
			msgInform
		},
		data(){
			return{
				TYPES:msgTypes
			}
		},
		computed:{
			...mapGetters('user',['userId'])
		},
		filters:{
			dateDiff
		},
		props:{
			msg:{
				type:Object,
				required:true
			}
		},
		methods:{
			tapMsg(){
				this.$emit('tapMsg',this.msg)
			},
			tapAvatar(){
				this.$emit('tapAvatar',this.msg)
			},
			menu(e){
				const point = e.touches[0]
				this.$emit('menu',point)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg{
		&_col{
			display: flex;
			padding-left: 30rpx;
			margin-bottom: 20rpx;
		}
		&_avatar{
			flex-shrink: 0;
			margin-right: 30rpx;
		}
		&_body{
			flex: 1;
			width: 200rpx;
			padding-right: 30rpx;
		}
		&_top{
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;
		}
		&_nick{
			
		}
		&_time{
			
		}
		&_content{
			padding-bottom: 20rpx;
		}
		&_det{
			
		}
	}
</style>
